<template>
	<view class="container">
		<!-- 导航栏 -->
		<u-navbar :title="name" title-color="black">
		</u-navbar>
		<!-- 骨架屏 -->
		<!-- 		<view v-if="loading">
			<view  style="width: 100%;height: 50px;margin-bottom: 2px;">教室</view>
			<view  style="width: 100%;height: 50px;margin-bottom: 2px;">教师</view>
			<view  style="width: 100%;height: 50px;margin-bottom: 2px;">课表</view>
			<view  style="width: 100%;height: 50px;margin: 20px 0;">课表</view>
		</view> -->

		<view class="container-classDetail">
			<view class="content">
				<view class="iconfont icon-jiaoxuelou1"
					style="font-size: 50rpx; font-weight: 700;margin: auto 0 auto 61.55px;color: #23b8ff;"></view>
				<view class="text"> {{classRoom}}</view>
			</view>
			<view class="content">
				<view class="iconfont icon-jiaoshimenhu"
					style="font-size: 50rpx; font-weight: 500;margin: auto 0 auto 61.55px;color: #23b8ff;"></view>
				<view class="text"> {{teacher}}</view>
			</view>
			<view class="content">
				<view class="iconfont icon-shijian1"
					style="font-size: 50rpx; font-weight: 500;margin: auto 0 auto 61.55px;color: #23b8ff;"></view>
				<view class="text"> {{time}}</view>
			</view>
		</view>
		<view type="default" @click="deleteCourse" class="delete"
			style="background-color: #FFFFFF; font-size: 17px;color:red; padding: 15px; text-align: center; border-bottom:1px #F0F2F5 solid;">
			<text>删除课程</text>
		</view>
		<view style="display: flex;align-items: center;" >
			<view class="studentList"
				style="width: 30%; height: 0;border-bottom: 1px solid #BFC0C3; margin-left: 15px;">

			</view>
			<view class="studentList"
				style="width: 40%; font-size: 16px; color:#BFC0C3;text-align: center;margin:10px auto;">
				<text>上课成员 ({{personList.length}}人)</text>
			</view>
			<view class="studentList"
				style="width: 30%; height: 0;border-bottom: 1px solid #BFC0C3; margin-right: 15px;">

			</view>
		</view>
		<view class="studentList  u-skeleton">
			<!-- 骨架屏 -->
			<view class="page" v-if="loading" v-for="item in [0,1,2,3,4]">
				<view class="person_item">
					<view class="person_sex iconfont icon-renyuan1 u-skeleton-circle"
						style="width: 150rpx;height: 150rpx;margin-left: 20px;">
					</view>
					<view class="person_data">
						<view class="person_data_item u-skeleton-fillet" style="margin-bottom: 5px; margin-left: 20px;">
							<text>学院:信息科学与技术学院技术学</text>
						</view>
						<view class="person_data_item u-skeleton-fillet" style="margin-bottom: 5px;margin-left: 20px;">
							<text>班级:信息科学与技术学院技术学</text>
						</view>
						<view class="person_data_item u-skeleton-fillet" style="margin-bottom: 5px;margin-left: 20px;">
							<text>姓名:信息科学与技术学院技术学</text>
						</view>
					</view>
				</view>
			</view>
			<view class="page" v-for="(item, index) in personList" :key="index" v-if="!loading">
				<view class="person_item">
					<view class="box" @click="toHimCourse(item)">
						<view class="person_sex iconfont icon-renyuan1 "
							:style="{'color': (item.sex == '男' ? '#23b8ff':'#EE82EE')}"></view>
						<view class="person_data">
							<view class="person_data_item">
								<text>学院:</text>
								<text>{{item.collegeName}}</text>
							</view>
							<view class="person_data_item" style="display:flex">
								<text>班级:</text>
								<text class="person_name">{{item.className}}</text>
							</view>
							<view class="person_data_item"
								style="display: flex;align-items: center;letter-spacing: rpx;">
								<text>姓名:</text>
								<text class="person_name">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" el-color="#EDEDED"></u-skeleton>
	</view>
</template>

<script>
	import miTaligntPersonItem from "../../page_miTa/components/miTaligntPersonItem/miTaligntPersonItem.vue"
	import toHimCourse from "../../static/js/toHimCourse.js"
	export default {
		mixins: [toHimCourse],
		onLoad(option) {
			this.classRoom = option.classRoom === "undefined" ? "" : option.classRoom; // 教室 
			this.week = option.week === "undefined" ? "" : this.weekObj[option.week]; // 星期几
			this.teacher = option.teacher === "undefined" ? "" : option.teacher; // 老师
			this.time = (option.time === "undefined" || option.time === "null") ? "" : option.time; // 时间，包括周次和节次
			this.id = option.infoId === "undefined" ? "" : option.infoId; // id
			this.selectWeek = option.selectWeek === "undefined" ? "" : option.selectWeek; // 第几周
			this.name = option.name === "undefined" ? "" : option.name;
			console.log(this.id)
			uni.setNavigationBarTitle({
				title: option.name === "undefined" ? "课程详情" : option.name
			})
			console.log(this.name)

		},
		async mounted() {
			let that = this;
			// 节次
			let str = this.time.substring((this.time.indexOf("[") + 1), this.time.indexOf("节"))
			let arr = str.split("-")
			let arr1 = arr.map(function(i, index, arr) {
				console.log(arr[index])
				return --i;
			}, this)
			var str1 = arr1.join(",");
			console.log(str1)

			let obj = {
				dayOfWeek: this.week,
				week: this.selectWeek,
				section: str1,
				local: this.classRoom,
				courseName: this.name,
			};
			const header = {
				Authority: uni.getStorageSync("Authority")
			}
			let res = await getApp().UniRequest("/zkcourse-branch/coursePlusPlus", "POST", obj, header);
			console.log(res)
			this.personList = res.data.students;
			this.loading = false;
		},
		data() {
			return {
				week: "",
				dayOfWeek: "",
				section: "",
				local: "",
				classRoom: "",
				teacher: "",
				time: "",
				id: "",
				name: "",
				header: null,
				selectWeek: "",
				weekObj: {
					"一": "1",
					"二": "2",
					"三": "3",
					"四": "4",
					"五": "5",
					"六": "6",
					"日": "7"
				},
				personList: [],
				loading: true, // 是否显示骨架屏组件
			}
		},
		methods: {
			deleteCourse() {
				let vm = this
				uni.showModal({
					title: '您确定要删除该课吗？',
					confirmText: '确定',
					cancelText: '取消',
					async success(i) {
						if (i.confirm) {
							uni.showLoading({
								title: '删除中'
							});
							let header = new Object()
							header = {
								// 'Content-Type': 'application/json',
								'Authority': uni.getStorageSync("Authority")
							}
							let res = await getApp().UniRequest("/coursePlus/authority?id=" + vm.id, "DELETE",
								"",
								header)
							console.log('删除结果', res);
							if (res.code == 20000) {
								uni.hideLoading()
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 2000
								});
								uni.navigateBack({
									success: () => {
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return;
										let options = {
											selectWeek: vm.selectWeek //例如上一页面是id为2的数据,要传递回去
										}

										page.$vm.getCourseNewData(vm.selectWeek)
									}
								})

								uni.showLoading({
									title: '正在加载课表',
									mask: true
								})
								vm.$emit('getCourseNewData', vm.selectWeek)
							} else {
								uni.hideLoading()
								uni.showToast({
									title: '请稍后重试',
									icon: 'error',
									duration: 2000
								});
								vm.show = false
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #FFFFFF;

		.content {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			// margin-bottom: 10px;
			text-align: center;
			border-bottom: 1px solid #F4F4F4;
			letter-spacing: 1rpx;

			.text {
				margin: auto;
				font-size: 16px;
				color: #4A4A4A;
			}
		}
	}

	.delete {
		letter-spacing: 2rpx;
	}

	/deep/ .container-classDetail {
		.u-cell-box {
			background-color: #F8F8F8;

			.u-cell {
				padding: 15px 25px !important;
			}
		}
	}

	.page {
		width: 100%;

		.person_item {
			width: 100%;
			height: 180rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			display: flex;
			background-color: #FFf;
			box-shadow: 0.5rpx 0.5rpx 5rpx #D9D9D9;
			border-radius: 10rpx;

			.box {
				width: 100%;
				display: flex;

				.person_sex {
					margin: 10rpx;
					width: 28%;
					height: 180rpx;
					margin-left: 40rpx;
					border-radius: 50%;
					font-size: 130rpx;
					line-height: 160rpx;
					// color: #;
					text-align: center;
				}

				.person_data {
					width: 72%;
					padding: 6rpx;
					padding-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height: 55rpx;
					letter-spacing: 3rpx;

					// color:  	#707070;
					.person_data_item {
						width: 100%;
						white-space: nowrap; //超出隐藏
						overflow: hidden;
						text-overflow: ellipsis;

						&>text:nth-child(1) {
							margin-right: 10rpx;
							font-size: 30rpx;
							// font-weight: 700;
							// color: #707070;
						}

						&>text:nth-child(2) {
							font-size: 28rpx;
							color: #555555;
						}

					}

				}
			}

			.concern {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 13%;
				height: 100%;
				text-align: center;
				line-height: 72rpx;

				.icon-shoucang {
					top: 50%;
					width: 100%;
					height: 72rpx;
					font-size: 54rpx;
					color: #C1CDC1;
				}

				.isConcern {
					color: #23b8ff !important;
				}

			}
		}
	}
</style>
